<template>
  <section class="jumbotron">
      <h3 class="jumbotron-heading">Search Github Users</h3>
      <div>
          <input type="text" placeholder="请输入要搜索的用户名称" v-model="keyWord"/>&nbsp;
          <button @click="searchUser">搜索</button>
      </div>
  </section>
</template>

<script>
import axios from 'axios'
export default {
   name:'Search',
   data(){
       return{
           keyWord:'',
       }
   },
   methods:{
       searchUser(){
        //    发送请求时更新List数据
           this.$bus.$emit('getUsers',{isFirst:false,isLoading:true,errMsg:'',userList:[]})
           axios.get('https://api.github.com/search/users?q='+this.keyWord).then(
                    response =>{
                        console.log("请求成功了",response.data.items)
                        //请求成功后更新List数据  在这步时已经不需要isFirst了所以可以不写
                        this.$bus.$emit('getUsers',{isLoading:false,errMsg:'',userList:response.data.items})
                    },
                    error =>{
                        console.log("请求失败了",error.message)
                        //请求失败后更新List数据 在这步时已经不需要isFirst了所以可以不写
                        this.$bus.$emit('getUsers',{isLoading:false,errMsg:error.message,userList:[]})
                    },
           )
       }
   }
}
</script>

<style>

</style>